<template>
  <div class="page-html-container">
    <!-- 列表实体 -->
    <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    > -->
    <itemHtml5 v-for="(temp, index) in list" :key="index" :item-data="temp" />
    <!-- </van-list> -->
    <!-- 数据加载器 -->
    <handlerListData type="html5" @get-data="getData" />
  </div>
</template>

<script>
import itemHtml5 from '@/components/ItemHtml5'
import handlerListData from '@/components/HandlerListData'
// import { list } from 'vant'
export default {
  components: {
    itemHtml5,
    handlerListData
    // vanList: list
  },
  data() {
    return {
      bufferList: [],
      showList: [],
      list: [],
      loading: false,
      finished: false
      // onLoadOff: false
    }
  },

  methods: {
    getData(list) {
      // const miva = this
      this.list = list
      // this.onLoad()
      // this.bufferList = list.splice(0, 1)
      // this.showList = this.showList.concat(this.bufferList)
      // setTimeout(_ => {
      //   this.showList = [...miva.showList, ...miva.list]
      //   miva.finished = true
      //   miva.loading = false
      // }, 3000)
    },
    onLoad() {
      // const miva = this
      // console.log('onLiad触发')
      // console.log(miva.list)
      // if (miva.onLoadOff) {
      //   console.log('稍后加载')
      // } else {
      //   if (miva.list.length !== 0) {
      //     const bufferArr = miva.list.splice(0, 4)
      //     miva.showList = [...miva.showList, ...bufferArr]
      //     miva.loading = false
      //     miva.onLoadOff = true
      //     setTimeout(_ => {
      //       miva.onLoadOff = false
      //     }, 1000)
      //   }
      // }
      // miva.finished = true
      // miva.loading = false
    }
  }
}
</script>
